<template>
    <div v-if="!message">
        <el-tabs class="demo-tabs">
            <el-tab-pane label="帮助问题">
                <el-row justify="space-between">
                    <el-col :span="10">
                        <div>
                            <p>常见问题</p>
                            <div>
                                <el-tabs v-model="activeName" class="demo-tabs">
                                    <el-tab-pane v-for="(item,index) in answer_types" :label="item" :name="item">
                                        <p class="title" v-for="item in dataMessage.rows" @click="BasicAppProblemMessage(item.id)">{{item.title}}</p>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div>
                            <p>学习手册</p>
                            <div>
                                <el-tabs v-model="study_active" class="demo-tabs">
                                    <el-tab-pane v-for="(item,index) in study_types" :label="item" :name="item">
                                        <p v-for="item in studyMessages.rows">
                                            <a href="#" @click="lookStudyNote(item.url)">{{item.title}}</a>
                                        </p>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div v-else style="height: 100%">
        <div v-if="basicAppProblemMessage">
            <el-page-header :content="basicAppProblemMessage.title" @back="goBack" />
            <el-divider />
            <div v-html="basicAppProblemMessage.detail"></div>
        </div>
    </div>
</template>

<script>
    import {reactive,toRefs,watch} from 'vue'
    import {basicAppProblem, basicManualList, basicAppProblemMessage,types} from "../../api/api";
    import {ElMessage} from "element-plus";

    export default {
        name: "answerHelp",
        setup(){
            let data = reactive({
                message:false,
                activeName:'',
                dataMessage:[],
                answer_types:[],
                basicAppProblemMessage:{},
                study_types:[],
                study_active:'',
                studyMessages:[]
            })

            let getTypes = () =>{
                types({type:'帮助问题'}).then(res =>{
                    data.answer_types = res.data
                    data.activeName = data.answer_types[0];
                })
                types({type:'学习手册'}).then(res =>{
                    console.log('学习手册下面的小类型',res.data);
                    data.study_types = res.data;
                    data.study_active = data.study_types[0]
                })
            }
            getTypes();


            watch(() =>data.activeName,() =>{
                basicAppProblem({type:data.activeName}).then(res =>{
                    data.dataMessage = res.data
                })
            })

            watch(() =>data.study_active,() =>{
                getStudyNote();
            })


            //帮助问题详情
            let BasicAppProblemMessage = (id) =>{
                basicAppProblemMessage(id).then(res =>{
                    console.log('常见问题详情',res)
                    data.basicAppProblemMessage = res.data
                    data.message = true;
                })
            }
            //学习手册
            let getStudyNote = () =>{
                basicManualList({type:data.study_active,courseID:localStorage.getItem('activeCourse')}).then(res =>{
                    data.studyMessages = res.data
                }).catch(err =>{
                    ElMessage({type:'error',message:err.message})
                })
            }

            let lookStudyNote = (url) =>{
                window.open(url)
            }

            let goBack = () =>{
                data.message = false
            }
            return{
                lookStudyNote,
                goBack,
                getStudyNote,
                ...toRefs(data),
                BasicAppProblemMessage
            }
        }
    }
</script>

<style scoped>
.title{
    line-height: 30px;
    font-size: 16px;
    cursor: pointer;
}
    .title:hover{
        color: #409eff;
    }
</style>
